<template>
  <el-container>
  <el-header class="list_head">
    <div class="head_title fl">
      <div class="title_text">电影大数据分析系统-电影列表</div>
    </div>
    <div class="head_back fr">
      <div class="back_search">
        <div class="search_input fl">
          <el-input
          placeholder="搜索电影..."
          @keyup.enter.native="search()"
          class="input"
          v-model="searchInput"
          @focus="focus"
        >
        </el-input>
        </div>
        <div class="search_button fr"><el-button style="height:4.5vh" @click="search()"><el-icon><Search/></el-icon></el-button>  
        </div>    
      </div>
    </div>
  </el-header>
  <el-main class="list_main">
    <div class="main_back fl">
    <el-button plain @click="$router.push('/')">主页</el-button>
    </div>

    <el-backtop :right="100" :bottom="100" />
    <div class="container">
    <div class="left_bar" v-if="films.length!=0">
        <div class="film_container point" @click="todetail(item.id)" v-for="item in films" :key="item">
            <div>
              <el-image :src= "item.imagePath" style="width: 100px; height: 100px" :fit="contain" />
            </div>
            <div>
                <div class="film_name">
                  <div class="chinese_name">{{ item.name }}</div>
                  <div class="eng_name">本名：{{ item.engName }}</div>
                </div>
                <div class="film_director">
                  <div>导演：{{ item.director }}</div>
                  <div style="margin-left:10px">编剧：{{ item.scriptwriter }}</div>
                </div>
                <div class="film_actor">演员：{{ item.actor }}</div>
                <div class="film_type">
                    <div>{{ item.type }}</div>
                    <div style="margin-left: 20px;">{{ item.releaseDate }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="left_bar" v-else>
      <el-image :src="nothing"></el-image>
      <p>^~^ 还没有该电影捏~~~~</p>
    </div>

    <div class="right_bar">
      <h4 v-for="item in kinds" :key="item" class="typecss" @click="searchType(item)">
        {{item}}
      </h4>
    </div>
    </div>
  </el-main>
  <el-footer class="list_foot">
    <div class="foot_page"><el-pagination
    :page-size="20"
    :current-page.sync="pageNow"
    :pager-count="11"
    layout="prev, pager, next"
    background
    @current-change="handleCurrentChange"
    :total="520">
    </el-pagination>
  </div>
  </el-footer>
</el-container>
  </template>

  <script>
    import {Search} from "@element-plus/icons-vue"
    import {ref} from 'vue'
    import {search,listMovies,types,type} from "../api/index.js";
    import { ElPagination } from 'element-plus'
    export default {
      components:{
         Search,
      },
      data () {
        return {
          nothing:require('../assets/img/nothing.png'),
          kinds:[],
          films:["1"],
          searchInput:'',
          pageparam:{params:
            {current:1}},
          searchparam:{
            params:{
               val:'地球',
               current:1
            }
          },
          clickMovieParam:{
            params:{
              movieId:251
            }
          },
          typeSearchParam:{
            params:{
               current:1
            }
          },
          pageNow: 1,  //当前页数
          article_content: [1,2,3,4], //内含5个对象的数组, 格式在下面介绍
          article_page: 4,   //用article_content.length, 根据数据量自动增页

          }
      },
      methods: {
        todetail(param){
          localStorage.setItem('pageNow', JSON.stringify(this.pageNow))
          this.$router.push('/FilmDetail?id='+param+'&currentpage='+this.pageparam.params.current)
        },
        async gettypes(){
          this.kinds = await types()
        },
        async getmovies(param){
          this.films = await listMovies(param)
          // this.pageNow = this.$route.query.pageparam
          // console.log("page:"+this.pageNow)
          // console.log(this.films)
        },
        async searchmovies(params){
          this.films = await search(params)
        },
        async searchmoviesBytype(movieType){
          this.films = await type(movieType,this.typeSearchParam)
        },
        handleCurrentChange(val) {
          this.pageparam.params.current = val
          localStorage.setItem('pageNow', JSON.stringify(val))
          this.pageNow = this.pageparam.params.current
          this.getmovies(this.pageparam.params.current)
          this.$router.push('/FilmList?pageparam='+val)
        },
        search(){
          this.searchparam.params.val = this.searchInput
          if(this.searchparam.params.val == "") 
          {this.getmovies(1)}
          else{
            this.$router.push('/SearchFilm?search='+this.searchparam.params.val)
            // this.searchmovies(this.searchparam)
          }
        },
        
        searchType(movieType){
          this.$router.push('/TypeList?movieType='+movieType)
        }
      },
      // beforeCreate(){
      //   if(this.$route.query.pageparam==undefined){
      //     this.getmovies(this.pageparam.params.current)
      //   }
      //   else{
      //     this.pageNow = this.$route.query.pageparam
      //     console.log(this.pageNow)
      //     this.getmovies(this.pageNow)
      //   }
         
      //    this.gettypes()
      // },
      created(){
        if(this.$route.query.pageparam==undefined){
          this.getmovies(this.pageparam.params.current)
        }
        else{
          this.pageNow = this.$route.query.pageparam
          this.getmovies(this.pageNow)
        }
        //  this.pageNow=JSON.parse(localStorage.getItem('pageNow'));
         console.log(123)
         this.gettypes()    
      },
      beforeCreate(){
        this.pageNow = this.$route.query.pageparam
      },
    }
  </script>

  <style scoped>
.container{
  padding-left: 100px;
  padding-top: 5%;
  padding-bottom: 5%;
  min-height: 120vh;
  display: flex;
}
.left_bar{
  width: 85%;
  min-height: 145vh;
  background-color:#fff;
  border-radius: 0.5%;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-right: 5%;
}
.right_bar{
  width: 8%;
  height: auto;
  max-height: 50vh; 
  background-color:#fff;
  border-radius: 3%;
  margin-left: 8%;
  margin-right: 4%;
  padding-left: 2%;
  padding-right: 2%;
  display: flex;
  flex-wrap:wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.film_container{
  margin-left:8%;
  margin-top: 40px;
  display: flex;
}
.film_name{
  font-size:18px;
  font-weight:800;
  display: -webkit-box;
  margin-left: 50px;
  display: flex;
}
.chinese_name{
  width:200px;
  height: 23px;
  overflow:hidden;
  text-align: left;
}
.eng_name{
  margin-left:15px;
  font-size:15px;
  overflow: hidden;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.film_director{
  font-size:12px;
  margin-left: 50px;
  display: flex;
  margin-left: 50px;
  margin-top: 8px;
}
.film_actor{
  font-size:12px;
  margin-left: 50px;
  margin-top: 8px;
  overflow: hidden;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.film_type{
  display:flex;
  font-size:10px;
  margin-left: 50px;
  margin-top: 8px;
  color: grey;
}
.list_head{
    width:100%;
    height:100px;
    padding:0px;
    min-width: 1366px;
    background-color:rgb(159, 159, 159);
  }
  .list_head .head_title{
    height: 100%;
    width:700px;
    position: relative;
  }
  .list_head .head_title .title_text{
    left:2%;
    top:30%;
    font-family: 'b';
    font-size:40px;
    color:#e24a4a;
    position: absolute;
    font-weight: 800;
    text-shadow:4px 4px pink;
  }
  .list_head .head_back{
    height:100%;
    width:600px;
    position:relative;
  }
  .list_head .head_back .back_search{
    height: 100%;
    position: relative;
  }
  .search_input{
    width:80%;
    height:3.5vh;
    padding-top: 6%;
  }
  .search_button{
    height:3.5vh;
    width:20%;
    padding-top: 6%;
  }
  .list_main{
    background-color:lightgrey;
    padding:0px;
    height: auto;
    width: 100%;
    min-width: 1366px;
    position:relative;
    /* position: fixed; */
    /* overflow: hidden; */
  }
  .list_main .main_back{
    height:50px;
    width:100px;
    position: absolute;
    left:6%;
    top:20px;
  }
  .list_foot{
    width:100%;
    height:80px;
    background-color:lightgrey;
    position: relative;
    min-width: 1366px;
  }
  .list_foot .foot_page{
    width:70%;
    height:40%;
    position: absolute;
    left:8%;
  }
  .search{
    width:60%;
    margin-left: 20%;
    height: 5vh;
    margin-top:5%;
    display: flex;
  }
  .point{
    cursor: pointer;
  }
  .typecss{
    margin:5% 0% 0% 10%;
    height: auto;
  }
  .typecss:hover {
    color: lightgrey;
    margin:5% 0% 0% 10%;
    height: auto;
    cursor: pointer;
  }
  </style>